<template>
    <div id="ludan">
        <div class="ludanbox">
			<div class="ludanleft" v-html="a">
			</div>
			<div class="ludanright">
				<div class="ludan_top" v-html="b">
				</div>
				<div class="ludan_middle" v-html="c">
				</div>
				<div class="ludan_middle">
					<div class="ludan_m_le" v-html="d">
					</div>
					<div class="ludan_m_ri" v-html="e">
					</div>
				</div>
			</div>
		</div>
    </div>
</template>
<script>
export default {
    name:"ludan",
    props: ['date'],
    data: function () {
        return {
           timeTwinkle:null,
			canvas:null,
			canvas2:null,
			canvas3:null,
			canvas4:null,
			canvas5:null,
			canvas6:null,
			a:null,
			b:null,
			c:null,
			d:null,
			e:null,
			f:null,
			paClass:false,
			set:null
        };
    },
    	watch:{
		//监控路单数据变化
		"model":function(newVal,oldVal){
                if(newVal.data===''){
                    this.canvas.clearRect(0,0,500,118);
                    this.canvas2.clearRect(0,0,500,59);
                    this.canvas3.clearRect(0,0,500,48);
                    this.canvas4.clearRect(0,0,500,48);
                    this.canvas5.clearRect(0,0,500,48);
                    this.canvas6.clearRect(0,0,500,28);
                }else if(newVal.data.length<oldVal.data.length){
                    console.log(5)
                    this.canvas.clearRect(0,0,500,118);
                    this.canvas2.clearRect(0,0,500,59);
                    this.canvas3.clearRect(0,0,500,48);
                    this.canvas4.clearRect(0,0,500,48);
                    this.canvas5.clearRect(0,0,500,48);
                    this.canvas6.clearRect(0,0,500,28);
                    this.$emit("postMessage",{data:newVal.data,model:this.model.models,w:false});
                }else{
                    this.$emit("postMessage",{data:newVal.data,model:this.model.models,w:false});
                }
        },
    },
    // 自定义监控路单长度移动指令
	directives:{
		moveLD:{
			update(el,bind){
				if(bind.value!=bind.oldValue){
					let val=bind.value;
					switch(val.id){
						case 1:
							if(val.maxX>120){
								el.scrollLeft=val.maxX-90;
							}else{
								el.scrollLeft=0;
							}
						break;
						case 2:
							if(val.maxX>229){
								el.scrollLeft=val.maxX-160;;
							}
							else{
								el.scrollLeft=0;
							}
						break;
						case 3:
							if(val.maxX>115){
								el.scrollLeft=val.maxX-150;
							}
							else{
								el.scrollLeft=0;
							}
						break;
						case 4:
							if(val.maxX>115){
								el.scrollLeft=val.maxX-150;
							}
							else{
								el.scrollLeft=0;
							}
						break;
						case 5:
							if(val.maxX>115){
								el.scrollLeft=val.maxX-150;
							}
							else{
								el.scrollLeft=0;
							}
						break;
						case 6:
							if(val.maxX>115){
								el.scrollLeft=val.maxX-60;
							}
							else{
								el.scrollLeft=0;
							}
						break;
					}
				}
			}
        },
        setCanvas:{
			bind(el,fun){
				el.width=500;
				el.height=118;
				let a=el.getContext('2d');
				fun.value(a,1);
			}
		},
		setCanvas2:{
			bind(el,fun){
				el.width=500;
				el.height=59;
				let a=el.getContext('2d');
				fun.value(a,2);
			}
		},
		setCanvas3:{
			bind(el,fun){
				el.width=500;
				el.height=48;
				let a=el.getContext('2d');
				fun.value(a,3);
			}
		},
		setCanvas4:{
			bind(el,fun){
				el.width=500;
				el.height=48;
				let a=el.getContext('2d');
				fun.value(a,4);
			}
		},
		setCanvas5:{
			bind(el,fun){
				el.width=500;
				el.height=48;
				let a=el.getContext('2d');
				fun.value(a,5);
			}
		},
		setCanvas6:{
			bind(el,fun){
				el.width=500;
				el.height=28;
				let a=el.getContext('2d');
				fun.value(a,6);
			}
		}
	},
    methods: {
        canvasLudan: function (x) {
            var _this = this;
            var LudanWorker = new Worker("./static/js/ludan.js");
            LudanWorker.postMessage(x);
            LudanWorker.onmessage = function (data) {
                switch (data.data.id) {
                    case 1:
                        _this.a = data.data.html;
                        break;
                    case 2:
                        _this.b = data.data.html;
                        break;
                    case 3:
                        _this.c = data.data.html;
                        break;
                    case 4:
                        _this.d = data.data.html;
                        break;
                    case 5:
                        _this.e = data.data.html;
                        break;
                }
            };
            LudanWorker.onerror = function (el) {
                console.log('错误' + el.filename + ":第" + el.lineno + "行");
            };
        },
        allCanvasLudan: function () {
        }
    },

	methods:{
		// 路问庄函数
		tabLudan(x){
			clearInterval(this.timeTwinkle);
			clearInterval(this.set)
			if(x===0){	
					this.$emit("postMessage",{data:this.model.data+'a',model:this.model.models,w:true});
				}else{					
					this.$emit("postMessage",{data:this.model.data+'e',model:this.model.models,w:true});
				}
			this.paClass=true;
			this.timeTwinkle=setTimeout(() => {
				this.$emit("postMessage",{data:this.model.data,model:this.model.models,w:true});
				this.paClass=false;
				clearInterval(this.set);
			}, 8000);
			let index=1;
			this.set=setInterval(()=>{
				console.log(this.paClass);
				if(!this.paClass){
					return false;
				}
				let a=this.a.html[this.a.html.length-1];
				let b=this.b.html[this.b.html.length-1];
				let c=this.c.html[this.c.html.length-1];
				let d=this.d.html[this.d.html.length-1];
				let e=this.e.html[this.e.html.length-1];
				let f=this.f.html[this.f.html.length-1];
				if(index%2==0){
					let img=new Image();
					img.src="./static/images/ludan/"+a.img;
					img.onload=()=>{
					this.canvas.drawImage(img,a.x,a.y,18,18);
						img=null;
					}

					let img2 =new Image();
					img2.src="./static/images/ludan/"+b.img;
					img2.onload=()=>{
						this.canvas2.drawImage(img2,b.x,b.y,9,9);
						img2=null;
					}

					this.canvas3.lineWidth=1.5;
					this.canvas3.strokeStyle=c.img;
					this.canvas3.beginPath();
					this.canvas3.arc(parseInt(c.x)+4,parseInt(c.y)+5,4,0*Math.PI/180,360*Math.PI/180);
					this.canvas3.stroke();

					this.canvas4.fillStyle=d.img;
					this.canvas4.beginPath();
					this.canvas4.arc(parseInt(d.x)+4,parseInt(d.y)+5,4,0*Math.PI/180,360*Math.PI/180);
					this.canvas4.fill();

					let img3=new Image();
					img3.src="./static/images/ludan/"+e.img;
					img3.onload=()=>{
						this.canvas5.drawImage(img3,e.x,parseInt(e.y)+1,8,8);
						img3=null;
					}
					
					let img4=new Image();
					img4.src="./static/images/ludan/"+f.img;
					img4.onload=()=>{
						this.canvas6.drawImage(img4,f.x,parseInt(f.y)+1,8,8)
					}
				}
				else{
					this.canvas.clearRect(a.x,a.y,18,18);
					this.canvas2.clearRect(b.x,b.y,9,9);
					this.canvas3.clearRect(parseInt(c.x),parseInt(c.y)+1,8,8);
					this.canvas4.clearRect(parseInt(d.x),parseInt(d.y)+1,8,8);
					this.canvas5.clearRect(e.x,parseInt(e.y)+1,8,8);
					this.canvas6.clearRect(f.x,parseInt(f.y)+1,8,8);
				}
				index++
			},1000)
		},
		// 保存路单
		setInLudan(el,num){
			switch(num){
				case 1:
					this.canvas=el;
				break;
				case 2:
					this.canvas2=el;
				break;
				case 3:
					this.canvas3=el;
				break;
				case 4:
					this.canvas4=el;
				break;
				case 5:
					this.canvas5=el;
				break;
				case 6:
					this.canvas6=el;
				break;
			}
		},
		// 渲染路单
		setLudan(msg){
			switch(msg.id){
				case 1:
					this.canvas.clearRect(0,0,500,118);
					this.a=msg;//保存数据
						// 绘制
						this.a.html.forEach(element => {
							let img=new Image();
							img.src="./static/images/ludan/"+element.img;
							img.onload=()=>{
								this.canvas.drawImage(img,element.x,element.y,18,18);
								img=null;
							}
						});
					break;
				case 2:
					this.canvas2.clearRect(0,0,500,59);
					this.b=msg;
						this.b.html.forEach(element=>{
							let img =new Image();
							img.src="./static/images/ludan/"+element.img;
							img.onload=()=>{
								this.canvas2.drawImage(img,element.x,element.y,9,9);
								img=null;
							}
						})
					break;
				case 3:
					this.canvas3.clearRect(0,0,500,48);
					this.c=msg;
						this.canvas3.lineWidth=1.5;
						this.c.html.forEach(element=>{
							this.canvas3.strokeStyle=element.img;
							this.canvas3.beginPath();
							this.canvas3.arc(parseInt(element.x)+4,parseInt(element.y)+5,4,0*Math.PI/180,360*Math.PI/180);
							this.canvas3.stroke();
						})
					break;
				case 4:
					this.canvas4.clearRect(0,0,500,48);
					this.d=msg;
						this.d.html.forEach(element=>{
							this.canvas4.fillStyle=element.img;
							this.canvas4.beginPath();
							this.canvas4.arc(parseInt(element.x)+4,parseInt(element.y)+5,4,0*Math.PI/180,360*Math.PI/180);
							this.canvas4.fill();
						})
					break;
				case 5:
					this.canvas5.clearRect(0,0,500,48);
					this.e=msg
						this.e.html.forEach(element=>{
							let img=new Image();
							img.src="./static/images/ludan/"+element.img;
							img.onload=()=>{
								this.canvas5.drawImage(img,element.x,parseInt(element.y)+1,8,8);
								img=null;
							}
						})
					break;
				case 6:
					this.canvas6.clearRect(0,0,500,28);
					this.f=msg;
					this.f.html.forEach(element=>{
						let img=new Image();
						img.src="./static/images/ludan/"+element.img;
						img.onload=()=>{
							this.canvas6.drawImage(img,element.x,parseInt(element.y)+1,8,8)
						}
					})
				break;
				case 7:
					this.$emit("setLwz",msg.html);
				break;
				case 8:
					this.$emit("setLwx",msg.html);
				break;
			}
		},
	},




    mounted: function () {
        	// 渲染路单
		if(this.model.data!=""){
				this.$emit("postMessage",{data:this.model.data,model:this.model.models,w:false});
		}
    },
    beforeDestroy(){
		clearInterval(this.set);
		clearTimeout(this.timeTwinkle);
		this.a={html:"",maxX:0};
		this.b={html:"",maxX:0};
		this.c={html:"",maxX:0};
		this.d={html:"",maxX:0};
		this.f={html:"",maxX:0};
		this.e={html:"",maxX:0};
		this.canvas.clearRect(0,0,500,118);
		this.canvas2.clearRect(0,0,500,59);
		this.canvas3.clearRect(0,0,500,48);
		this.canvas4.clearRect(0,0,500,48);
		this.canvas5.clearRect(0,0,500,48);
		this.canvas6.clearRect(0,0,500,28);
	},
     methods: {
        canvasLudan: function (x) {
            var _this = this;
            var LudanWorker = new Worker("./static/js/ludan.js");
            LudanWorker.postMessage(x);
            LudanWorker.onmessage = function (data) {
                switch (data.data.id) {
                    case 1:
                        _this.a = data.data.html;
                        break;
                    case 2:
                        _this.b = data.data.html;
                        break;
                    case 3:
                        _this.c = data.data.html;
                        break;
                    case 4:
                        _this.d = data.data.html;
                        break;
                    case 5:
                        _this.e = data.data.html;
                        break;
                }
            };
            LudanWorker.onerror = function (el) {
                console.log('错误' + el.filename + ":第" + el.lineno + "行");
            };
        },
        allCanvasLudan: function () {
        }
    },
    mounted: function () {
        if (this.date) {
            if (window.Worker) {
                this.canvasLudan("aefaebeeeeeaaaaaeeeee");
            }
            else {
                this.allCanvasLudan("aefaebeeeeeaaaaaeeeee");
            }
        }
    }
}
</script>
<style scoped>

.ludanbox{ -webkit-box-flex:1; -ms-flex:1; flex:1;background:url(../img/ludanbobg1.jpg) no-repeat;background-size: 100% 100%;width:100%;height:100%;background-size: 100% 100%}
.nx .vivwShow .LuDanCanvas{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border: 1px solid #fcc900;
}
</style>
